<template>
  <div>
    <TopFilter ref="TopFilterss" :list="topFilterInit" :cols="3" :collapse="collapse" labelWidth="110" @filterChange="changeHandle" @onRowSelectChange="selectChange"></TopFilter>
    <BreakSpace label="旧件选择列表" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="usedTable"
      :columns="columns"
      :params="fetchParams"
      :fetchapi="fetchApi"
      :datakey="'records'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      selectionType="multiple"
    >
      <template slot="controls" slot-scope="props">
        <multiuse-button size="small" type="primary" icon="el-icon-plus" :click="saveDialog.bind()">保存</multiuse-button>
      </template>
    </FilterTable>
    <div style="padding-top: 3rem"></div>
  </div>
</template>
<script>
import { getPartType } from '@/api/dictionary';
import { getDestoryListByPage } from '@/api/usedPartsDestructionDealer/usedPartsDestroyedApply';

export default {
  // mixins: [dictionary],
  data() {
    return {
      dataList: [],
      dataList1: [],
      visible: false,
      visibleDrawer: false,
      collapse: false,
      infoId: null,
      topFilterInit: this.topFilterInitFun(),
      flterValue: {}, //参数
      columns: this.creatHeader(),
      // columns1: this.creatHeader1(),
      fetchApi: getDestoryListByPage,
      fetchParams: {}, //ipa 接口
      selectedRows: [], //选中经销商
      // formList: this.createFormList(),
      // formList1: this.createFormList1(),
      saveData: null,
      activeName: '审核记录',
      saveDataFile: {},
    };
  },
  async created() {
    // // this.dataList = [...res.data.items];
    // this.dataList1 = [...res.data.items];
    // console.log(this.dataList);
    let res = await getPartType({ type: 5501 });
    this.topFilterInit.find((x) => x.fieldName == 'cmsClaimType').itemList = res.data.map((x) => ({ value: x.codeId, text: x.codeCnDesc }));
  },
  methods: {
    add() {},
    formChangeHandle(val) {
      console.log(val);
      this.saveData = val;
    },
    formChangeHandleFile(val) {
      console.log(val);
      this.saveDataFile = val;
    },
    //搜索获取数据
    changeHandle(val) {
      this.fetchParams = { ...val };
      console.log(val);
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
    },
    //保存
    saveDialog() {
      console.log(this.selectedRows);
      if (this.selectedRows.length) {
        this.$emit('save', this.selectedRows);
      } else {
        this.$notify({
          title: '警告',
          message: '请选择旧件信息!',
          type: 'warning',
        });
      }
    },
    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    chooseOrderNo() {
      this.visible = true;
    },
    //搜索数据
    topFilterInitFun() {
      return [
        { type: 'INPUT', label: '索赔单号', fieldName: 'cmsClaimNo', placeholder: '请输入', initialValue: '' },
        { type: 'SELECT', label: '索赔类型', fieldName: 'cmsClaimType', placeholder: '请选择', initialValue: '', itemList: [] },
        { type: 'INPUT', label: '旧件代码', fieldName: 'partCode', placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '旧件名称', fieldName: 'partName', placeholder: '请输入', initialValue: '' },
      ];
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        { title: '索赔单号', dataIndex: 'claimNo', sorter: true },
        { title: '维修工单号', dataIndex: 'roNo', sorter: true },
        { title: '旧件代码', dataIndex: 'partCode', sorter: true },
        { title: '旧件名称', dataIndex: 'partName', sorter: true },
        { title: '索赔数量', dataIndex: 'partCount', sorter: true },
        { title: '销毁数量', dataIndex: 'pestructionCount', sorter: true},
        { title: 'VIN', dataIndex: 'vin', sorter: true },
        { title: '索赔类型', dataIndex: 'cmsClaimTypeStr', sorter: true }
      ];
    },
  },
};
</script>

<style lang="less" scoped></style>
